An introduction to Sass, the CSS preprocessor which saves you time and increases your productivity.

1. Simplifying CSS
with Sass
Thomas Reynolds
@tdreyno
tdreyno@gmail.com
awardwinningfjords.com

2. Who uses CSS?

3. Who writes a lot of CSS?

4. What are some
common problems?

5. Selector Repetition
Even if we do everything right,
we still end up with something like this
#navigation {...}
#navigation ul {...}
#navigation ul li {...}
#navigation ul li.first {...}
#navigation ul li.last {...}
#navigation ul li a {...}
#navigation ul li a:hover {...}

6. Style Repetition
#navigation ul li#nav_home {
background: url(/images/home_off.gif) no-repeat; }
#navigation ul li#nav_features {
background: url(/images/features_off.gif) no-repeat; }
#navigation ul li#nav_tour {
background: url(/images/tour_off.gif) no-repeat; }
#navigation ul li#nav_business_care {
background: url(/images/business_care_off.gif) no-repeat; }
#navigation ul li#nav_quantum {
background: url(/images/quantum_off.gif) no-repeat; }
#navigation ul li#nav_payroll_solutions {
background: url(/images/payroll_solutions_off.gif) no-repeat; }
#navigation ul li#nav_addons {
background: url(/images/addons_off.gif) no-repeat; }
#navigation ul li#nav_system_reqs {
background: url(/images/system_reqs_off.gif) no-repeat; }

7. IE Hacks
Who’s written this before?
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0; }
.clearfix {
display: inline-block; }
html[xmlns] .clearfix {
display: block; }
* html .clearfix {
height: 1%; }

8. CSS Soup
#header { display:block; width:950px; height:85px; position:relative; overflow:hidden; }
#header h1 { clear:both; display:block; position:relative; width:394px; height:27px;
left:29px; overflow:hidden; text-indent:-999em; background:url(/Content/images-FR/
logo_fr.gif) 0 0 no-repeat transparent; }
#header .toplinks { display:block; height:34px; padding-right:46px; text-align:right;
height:34px; overflow:hidden; vertical-align:bottom; font:normal 1.2em/3.9em arial; }
#header p { position:absolute; width:250px; height:52px; overflow:hidden; font:bold
13px/17px arial; color:#000; padding-right:46px; text-align:right; top:40px; right:0; }
#header p small { clear:both; display:block; font:bold 13px/18px arial; color:#00338d; }
Actual CSS a co-worker sent me

9. Browser have different
CSS defaults
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline; }
Part of Eric Meyer’s CSS Reset

10. Can we improve it?
• Avoid selector repetition with nesting
• Avoid style repetition with functions
• Build IE Hacks into the language
• Require well-formatted code
• Reset browser defaults without googling

11. Text
sass-lang.com

12. The Language
#example {
border: 1px solid black;
background: blue; }

13. The Language
#example
border: 1px solid black
background: blue

14. The Language
#example {
border: 1px solid black;
background: blue; }
css2sass input.sass
#example
border: 1px solid black
background: blue

15. Variables
!border_color = #ccc
#example
:border= !border_color

16. Avoid Selector
Repetition
CSS Sass
#navigation {...} #navigation
#navigation ul {...} ul
#navigation ul li {...} li
#navigation ul li.first {...} &.first
#navigation ul li.last {...} &.last
#navigation ul li a {...} a
#navigation ul li a:hover {...} &:hover

17. Avoid Style Repetition
CSS
#navigation ul li#nav_home {
background: url(/images/home_off.gif) no-repeat; }
#navigation ul li#nav_features {
background: url(/images/features_off.gif) no-repeat; }
#navigation ul li#nav_tour {
background: url(/images/tour_off.gif) no-repeat; }
#navigation ul li#nav_business_care {
background: url(/images/business_care_off.gif) no-repeat; }
Sass
=nav-item(!name)
&#nav_#{!name}
:background url(/images/#{!name}_off.gif) no-repeat
#navigation ul li
+nav-item("home")
+nav-item("features")
+nav-item("tour")
+nav-item("business_car")

18. Common mixins

19. Common mixins
• The Compass Project implements
• YUI
• Blueprint
• 960.gs
• Browser reset, clearfix, horizontal lists,
sprites, custom bullet images & more

20. IE Hacks
CSS Sass
.clearfix:after { @import compass.sass
content: ".";
display: block; .clearfix
clear: both; +clearfix
visibility: hidden;
line-height: 0;
height: 0; }
.clearfix {
display: inline-block; }
html[xmlns] .clearfix {
display: block; }
* html .clearfix {
height: 1%; }

21. Reset Stylesheets
• Take your pick
• @import compass/reset.sass
• @import blueprint/reset.sass
• @import yui/reset.sass

22. Putting it all together
• Re-implement the Blueprint sample page:
• Semantic HTML
• All layout in CSS, not HTML classes
• Using Sass mixins for Blueprint

24. @import blueprint/reset
@import blueprint/modules/grid
@import blueprint/modules/fancy_type
+blueprint-typography
+fancy-type
h2
+alt
hr
+colruler
&.space
+colspacer
#frame
+container

25. #box1 #box2 #box3
+column(7) +column(8) +column(7)
+colborder +colborder +last

26. #content
+column(15)
+prepend(1)
+colborder
img
+pull(1)

27. #nested1 #nested2
+column(7) +column(7)
+colborder +last

28. #sidebar
+column(7)
+last
h3 span
+alt

29. Putting it all togetherhtml, body {
ol {
margin: 0 1.5em 1.5em 1.5em;
h2
margin: 0; list-style-type: decimal; }
padding: 0; dl {
border: 0; margin: 0 0 1.5em 0; }
font-weight: inherit; dl dt {
font-style: inherit; font-weight: bold; }
+alt
font-size: 100%; dd {
font-family: inherit; margin-left: 1.5em; }
vertical-align: baseline; } table {
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, margin-bottom: 1.4em;
pre, a, abbr, acronym, address, code, del, dfn, em, img, width: 100%; }
hr
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr { th {
margin: 0; font-weight: bold; }
padding: 0; thead th {
border: 0; background: #c3d9ff; }
font-weight: inherit; th, td, caption {
+colruler
font-style: inherit; padding: 4px 10px 4px 5px; }
font-size: 100%; tr.even td {
font-family: inherit; background: #e5ecf9; }
vertical-align: baseline; } tfoot {
blockquote, q { font-style: italic; }
&.space
margin: 0; caption {
padding: 0; background: #eee; }
border: 0; .quiet {
font-weight: inherit; color: #666666; }
font-style: inherit; .loud {
+colspacer
font-size: 100%; color: #111111; }
font-family: inherit; p + p {
vertical-align: baseline; text-indent: 2em;
quotes: "" ""; } margin-top: -1.5em;
blockquote:before, q:before, /* Don't want this in forms. */ }
#frame
blockquote:after, q:after { form p + p {
content: ""; } text-indent: 0; }
th, td, caption { p.incr,
margin: 0; .incr p {
padding: 0; font-size: 0.833em;
+container
border: 0; line-height: 1.44em;
font-weight: inherit; margin-bottom: 1.5em; }
font-style: inherit; .caps {
font-size: 100%; font-variant: small-caps;
font-family: inherit; letter-spacing: 1px;
#box1
vertical-align: baseline; text-transform: lowercase;
text-align: left; font-size: 1.2em;
font-weight: normal; line-height: 1%;
vertical-align: middle; } font-weight: bold;
table { padding: 0 2px; }
+column(7)
margin: 0; .dquo {
padding: 0; margin-left: -!offset; }
border: 0; .alt {
font-weight: inherit; color: #666;
font-style: inherit; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif;
+colborder
font-size: 100%; font-style: italic;
font-family: inherit; font-weight: normal; }
vertical-align: baseline; h2 {
border-collapse: separate; color: #666;
border-spacing: 0; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif;
#box2
vertical-align: middle; } font-style: italic;
a img { font-weight: normal; }
border: none; } hr {
body { background: #dddddd;
line-height: 1.5; color: #dddddd;
+column(8)
font-family: Helvetica Neue, Arial, Helvetica, sans-serif; clear: both;
color: #333333; float: none;
font-size: 75%; } width: 100%;
h1 { height: .1em;
font-weight: normal; margin: 0 0 1.45em;
+colborder
color: #222222; border: none; }
font-size: 3em; hr.space {
line-height: 1; background: #dddddd;
margin-bottom: 0.5em; } color: #dddddd;
h1 img { clear: both;
#box3
margin: 0; } float: none;
h2 { width: 100%;
font-weight: normal; height: .1em;
color: #222222; margin: 0 0 1.45em;
font-size: 2em; border: none;
+column(7, true)
margin-bottom: 0.75em; } background: #fff;
h3 { color: #fff; }
font-weight: normal; #frame {
color: #222222; width: 950px;
font-size: 1.5em; margin: 0 auto;
#content
line-height: 1; overflow: hidden;
margin-bottom: 1em; } display: inline-block; }
h4 { #frame {
font-weight: normal; display: block; }
color: #222222; #box1 {
+column(15)
font-size: 1.2em; display: inline;
line-height: 1.25; float: left;
margin-bottom: 1.25em; } margin-right: 10px;
h5 { width: 270px;
font-weight: normal; padding-right: 24px;
+prepend(1)
color: #222222; margin-right: 25px;
font-size: 1em; border-right: 1px solid #eeeeee; }
font-weight: bold; * html #box1 {
margin-bottom: 1.5em; } overflow-x: hidden; }
h6 { #box2 {
+colborder
font-weight: normal; display: inline;
color: #222222; float: left;
font-size: 1em; margin-right: 10px;
font-weight: bold; } width: 310px;
h2 img, h3 img, h4 img, h5 img, h6 img { padding-right: 24px;
img
margin: 0; } margin-right: 25px;
p { border-right: 1px solid #eeeeee; }
margin: 0 0 1.5em; } * html #box2 {
p img.left { overflow-x: hidden; }
display: inline; #box3 {
+pull(1)
float: left; display: inline;
margin: 1.5em 1.5em 1.5em 0; float: left;
padding: 0; } margin-right: 0;
p img.right { width: 270px; }
display: inline; * html #box3 {
#nested1
float: right; overflow-x: hidden; }
margin: 1.5em 0 1.5em 1.5em; #content {
padding: 0; } display: inline;
a { float: left;
text-decoration: underline; margin-right: 10px;
+column(7)
color: #000099; } width: 590px;
a:visited { padding-left: 40px;
color: #000066; } padding-right: 24px;
a:focus { margin-right: 25px;
color: black; } border-right: 1px solid #eeeeee; }
+colborder
a:hover { * html #content {
color: black; } overflow-x: hidden; }
a:active { #content img {
color: #cc0099; } display: inline;
blockquote { float: left;
#nested2
margin: 1.5em; position: relative;
color: #666; margin-left: -40px; }
font-style: italic; } #content #nested1 {
strong { display: inline;
font-weight: bold; } float: left;
+column(7, true)
em { margin-right: 10px;
font-style: italic; } width: 270px;
dfn { padding-right: 24px;
font-style: italic; margin-right: 25px;
font-weight: bold; } border-right: 1px solid #eeeeee; }
#sidebar
sup, sub { * html #content #nested1 {
line-height: 0; } overflow-x: hidden; }
abbr, acronym { #content #nested2 {
border-bottom: 1px dotted #666; } display: inline;
address { float: left;
+column(7, true)
margin: 0 0 1.5em; margin-right: 0;
font-style: italic; } width: 270px; }
del { * html #content #nested2 {
color: #666; } overflow-x: hidden; }
pre { #sidebar {
h3 span
margin: 1.5em 0; display: inline;
white-space: pre; } float: left;
pre, code, tt { margin-right: 0;
font: 1em 'andale mono', 'lucida console', monospace; width: 270px; }
line-height: 1.5; } * html #sidebar {
+alt
li ul, li ol { overflow-x: hidden; }
margin: 0 1.5em; } #sidebar h3 span {
ul { color: #666;
margin: 0 1.5em 1.5em 1.5em; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif;
list-style-type: disc; } font-style: italic;
font-weight: normal; }

31. Learn more
• Sass: http://sass-lang.com
• Sass Textmate Bundle:
http://github.com/seaofclouds/sass-textmate-bundle/
• Compass: http://compass-style.org
• Compass Textmate Bundle:
http://github.com/grimen/compass_blueprint_tmbundle/
• Blueprint CSS: http://blueprintcss.org/
• Me! http://awardwinningfjords.com/

32. Questions?
Thomas Reynolds
@tdreyno
tdreyno@gmail.com
awardwinningfjords.com